<template>
  <div class="components-dropdown-demo-placement" @mouseover="open = true">
    <a-dropdown :getPopupContainer="t => t?.parentElement" :open="open">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
        "
      >
        <iconfont name="#icon-qiemian" style="font-size: 24px" />
        <div style="display: flex">
          <div>切面显示</div>
          <div><down-outlined /></div>
        </div>
      </div>
      <template #overlay>
        <div class="slice-overlay" @click.stop>
          <div>选择切面</div>
          <div class="slice-btns">
            <div
              :style="selectedFace === 'XY' ? { background: '#dbefff' } : {}"
              @click="onClickFace('XY')"
            >
              XY
            </div>
            <div
              :style="selectedFace === 'XZ' ? { background: '#dbefff' } : {}"
              @click="onClickFace('XZ')"
            >
              XZ
            </div>
            <div
              :style="selectedFace === 'YZ' ? { background: '#dbefff' } : {}"
              @click="onClickFace('YZ')"
            >
              YZ
            </div>
          </div>
          <div style="margin-top: 16px">位置</div>
          <div>
            <a-slider
              :min="min"
              :max="max"
              v-model:value="value[selectedFace]"
            />
          </div>
          <div style="margin-top: 16px">
            <div class="slice-checkbox">
              <div>启用切面</div>
              <div><a-checkbox v-model:checked="enable" /></div>
            </div>
            <div class="slice-checkbox">
              <div>显示切面</div>
              <div><a-checkbox v-model:checked="visible" /></div>
            </div>
            <div class="slice-checkbox">
              <div>翻转切面</div>
              <div><a-checkbox v-model:checked="inversion" /></div>
            </div>
          </div>
        </div>
      </template>
    </a-dropdown>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'
import iconfont from '@/components/iconfont.vue'

let props = defineProps({
  boundingBox: { required: true },
})
let emit = defineEmits(['change'])

/**
 * 菜单显示
 */
let open = ref(false)
function onClose() {
  open.value = false
}
onMounted(() => {
  document.addEventListener('click', onClose)
})
onUnmounted(() => {
  document.removeEventListener('click', onClose)
})

/**
 * 面选择
 */
let selectedFace = ref('XY')
function onClickFace(face) {
  selectedFace.value = face
}

/**
 * 滑块限制值
 */
let min = computed(() => {
  if (selectedFace.value === 'XY') {
    return props.boundingBox?.min?.z || 0
  }
  if (selectedFace.value === 'XZ') {
    return props.boundingBox?.min?.y || 100
  }
  if (selectedFace.value === 'YZ') {
    return props.boundingBox?.min?.x || 100
  }
})
let max = computed(() => {
  if (selectedFace.value === 'XY') {
    return props.boundingBox?.max?.z || 100
  }
  if (selectedFace.value === 'XZ') {
    return props.boundingBox?.max?.y || 100
  }
  if (selectedFace.value === 'YZ') {
    return props.boundingBox?.max?.x || 100
  }
})
/**
 * 面值
 */
let value = ref({
  XY: 0,
  XZ: 0,
  YZ: 0,
})
watch(
  () => props.boundingBox,
  () => {
    value.value.XY = props.boundingBox.max.z
    value.value.XZ = props.boundingBox.max.y
    value.value.YZ = props.boundingBox.max.x
  },
)

/**
 * 启动开关
 */
let enable = ref(false)
let visible = ref(true)
let inversion = ref(false)

watch(
  [selectedFace, value, enable, visible, inversion],
  ([selectedFace, value, enable, visible, inversion]) => {
    emit('change', [
      selectedFace,
      value[selectedFace],
      enable,
      visible,
      inversion,
    ])
  },
  { deep: true },
)
</script>
<style scoped lang="less">
.components-dropdown-demo-placement .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}
.slice-overlay {
  padding: 16px;
  background-color: #fff;
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  .slice-btns {
    display: flex;
    margin-top: 8px;
    > * {
      padding: 0 8px;
      margin-right: 16px;
      cursor: pointer;
    }
  }
  .slice-checkbox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }
}
</style>
